<template>
  <el-col id="upvideo">
    <uploader
      ref="upload"
      :options="options"
      @file-added="onFileAdded"
      @file-success="onFileSuccess"
      @file-progress="onFileProgress"
      @file-error="onFileError"
      @fileRemoved="fileRemoved"
      :autoStart="start"
      :fileStatusText="optdata"
      :fileList="fileList"
      class="uploader-example"
    >
      <uploader-unsupport></uploader-unsupport>
      <uploader-drop>
        <uploader-btn>点击上传</uploader-btn>
        <!-- <uploader-btn :attrs="attrs">select images</uploader-btn>
        <uploader-btn :directory="true">select folder</uploader-btn>-->
      </uploader-drop>
      <uploader-list></uploader-list>
    </uploader>
  </el-col>
</template>
<script>
export default {
  name: "uplodervideo",
  computed: {
    upUrls: {
      get: function() {
        return process.env.baseUrl + this.upUrl;
      },
      set: function() {
        return process.env.baseUrl + this.upUrl;
      }
    }
  },
  data() {
    return {
      start: false,
      dataurl: "",
      optdata: {
        success: "上传成功",
        error: "上传失败",
        uploading: "上传中...",
        paused: "暂停",
        waiting: "开始"
      },
      fileList: [],
      options: {
        // process.env.baseUrl + "/v1/upload_video"
        target: () => {
          return this.$baseUrl + "/api/admin/com_banner_video";
        }, //上传路径
        chunkSize: "2097152", //2M;
        maxChunkRetries: 0,
        singleFile: true,
        forceChunkSize: true,
        testChunks: true,
        simultaneousUploads: 1,
        // prioritizeFirstAndLastChunk: true,
        headers: {},
        query: {
          com_id: ""
        },
        parseTimeRemaining: function(timeRemaining, parsedTimeRemaining) {
          return parsedTimeRemaining
            .replace(/\syears?/, "年")
            .replace(/\days?/, "天")
            .replace(/\shours?/, "小时")
            .replace(/\sminutes?/, "分钟")
            .replace(/\sseconds?/, "秒");
        },
        categoryMap: {
          image: ["gif", "jpg", "jpeg", "png", "bmp", "webp"],
          video: ["mp4", "m3u8", "rmvb", "avi", "swf", "3gp", "mkv", "flv"],
          audio: ["mp3", "wav", "wma", "ogg", "aac", "flac"],
          document: [
            "doc",
            "txt",
            "docx",
            "pages",
            "epub",
            "pdf",
            "numbers",
            "csv",
            "xls",
            "xlsx",
            "keynote",
            "ppt",
            "pptx"
          ]
        },
        permanentErrors: [1001, 1003],
        testMethod: "post",
        checkChunkUploadedByResponse: function(chunk, message) {
          console.log(chunk, message);
          // 检查每一个分块
          // console.log(message);
          // let objMessage = JSON.parse(message);
          // if (objMessage.code === 0) {
          //   return true;
          // }
          // return (objMessage.uploaded || []).indexOf(chunk.offset + 1) >= 0;
        },
        processParams(params) {
          return params;
        }
      }
    };
  },
  props: {
    knobble: {
      type: Object,
      default: () => {
        return {};
      }
    },
    com_id: {
      type: Number,
      default: 0
    },
    upUrl: {
      type: String,
      default: () => {
        return "/api/admin/com_banner_video";
      }
    }
  },
  watch: {
    com_id: {
      handler(val) {
        // console.log(val, olval);
        this.setoption(val);
      },
      deep: true
    }
  },
  mounted() {
    let data = JSON.parse(sessionStorage.getItem("user"));
    this.options.headers["X-Access-Token"] = data.token;
    this.options.headers["X-Access-Uid"] = data.id;
    this.setoption(this.com_id);
    // this.dataurl = process.env.baseUrl + this.upUrl;
    // this.options.target = process.env.baseUrl + this.upUrl;
  },
  methods: {
    setoption(data) {
      if (data.video_id) {
        // this.options.query.video_id = data.video_id;
        this.options.query.com_id = data || this.$store.state.com_id;
        return;
      }
      // this.options.query.name = data.name;
      // this.options.query.info = data.info;
      // this.options.query.course_id = data.course_id;
      this.options.query.com_id = this.com_id;
      // this.options.target = process.env.baseUrl + this.upUrl;
    },
    onFileAdded(file) {
      console.log(file, "add");
      // this.options.target = process.env.baseUrl + this.upUrl;
      // this.options.query.file = file.file;
      // this.options.query = data;
    },
    onFileProgress(rootFile, file, chunk) {
      console.log(
        `上传中 ${file.name}，chunk：${chunk.startByte /
          1024 /
          1024} ~ ${chunk.endByte / 1024 / 1024}`
      );
    },
    onFileSuccess(rootFile, file, response, chunk) {
      console.log(chunk);
      if (typeof response == "string") {
        let responseobj = JSON.parse(response);
        if (responseobj.code == 0) {
          this.$message({
            type: "success",
            message: "上传成功"
          });
          this.$emit("upsecction");
          this.fileRemoved();
        } else {
          this.$message.error("上传失败请重试");
        }
      }

      // console.log(rootFile, file, response, chunk, "onFileSuccess");
    },
    onFileError(rootFile, file, response) {
      this.$message({
        message: response,
        type: "error"
      });
    },
    uplodevideo() {
      // console.log("上传");
      let divs = document.getElementsByClassName("uploader-file-resume")[0];
      divs.click();
      // this.start = true;
    },
    fileRemoved(file) {
      console.log(file);
      // this.$refs.upload.cancel();
      // let divs = document.getElementsByClassName("uploader-list")[0];
      // divs.style.display = "none";
      this.fileList = [];
    }
  }
};
</script>
<style lang="scss">
.uploader-file[status="paused"] .uploader-file-resume {
  display: none;
}
</style>
